<template>
	<view class="news-list">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
			<view class="contain">
				<view class="banner">
					<ad-swipers v-if="type == 0" :pid="14" height="340rpx">
					</ad-swipers>
					<ad-swipers v-if="type == 1" :pid="15" height="340rpx">
					</ad-swipers>
				</view>
				<!-- <tabs :current="active" @change="changeActive" :bar-width="60">
					<tab name="全部"></tab>
					<tab v-for="(item, index) in categoryList" :key="index" :name="item.name"></tab>
				</tabs> -->
				<view class="main">
					<view class="article-list bg-white" v-for="(list,i) in newsList" :key="i">
						<view class="article-name">
							<text style="bold">{{list.cname}}</text>
						</view>
						<u-collapse>
							<u-collapse-item :title="item.title" v-for="(item, index) in list.lists" :key="item.id"
								ref="collapseHeight" @change="handleOpenChange(item,index)">
								
								<u-parse :html="item.content" :show-with-animation="true"></u-parse>
								
							</u-collapse-item>
						</u-collapse>

					
					</view>
				</view>
			</view>

		</mescroll-body>
	</view>
</template>

<script>
	import {
		getCategoryList,
		getArticleList,
		getHelpGrouplists
	} from '@/api/store';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				active: 0,
				upOption: {
					auto: false,
					empty: {
						icon: '/static/images/news_null.png',
						tip: "暂无数据",
					}
				},
				categoryList: [],
				newsList: [],
				type: -1,
			};
		},

		onLoad(options) {
			this.type = this.$Route.query.type || 0;
			if (this.type) {
				uni.setNavigationBarTitle({
					title: '帮助中心'
				});
			} else {
				uni.setNavigationBarTitle({
					title: '商城资讯'
				});
			}

		},

		methods: {
			changeActive(e) {
				this.active = e;
				this.newsList = [] // 先置空列表,显示加载进度
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},
			async downCallback() {
				await this.getCategoryListFun();
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				const {
					type,
					active,
					categoryList
				} = this
				getHelpGrouplists({
				}).then(({
					data
				}) => {
					this.newsList = data;
					let curPageData = data;
					let curPageLen = curPageData.length;
					let hasNext = !!data.more;
					this.newsList = curPageData;
					this.mescroll.endSuccess(curPageLen, hasNext);
				}).catch(() => {
					this.mescroll.endErr()
				})
			},
			handleOpenChange(item,index){
				console.log('==========item======');
				console.log(item);
				console.log("index",index)
				if(item.aid >0){
					uni.navigateTo({
							url:'/bundle/pages/news_details/news_details?type='+ item.cid +'&aid='+item.aid
						})
					return;
				}
				setTimeout(()=>{
					this.$refs.collapseHeight[item.sort].queryRect()
					console.log('this.$refs.collapseHeight',this.$refs.collapseHeight)
				},20)
			},
			async getCategoryListFun() {
				const {
					code,
					data
				} = await getCategoryList({
					type: this.type
				})
				if (code == 1) {
					this.categoryList = data
				}
			},
		}
	};
</script>
<style lang="scss">
	.news-list {
		.main {
			.article-list {
				margin: 20rpx 20rpx 0;
				border-radius: 8rpx;
				padding: 0 5rpx 0 25rpx;
				.article-name{
					border-bottom: $-solid-border;
					height: 88rpx;
					line-height: 88rpx;
					font-weight: bolder;
				}
				.article-item {
					padding: 20rpx;
					align-items: flex-start;

					&:not(:last-of-type) {
						border-bottom: $-solid-border;
					}
				}
			}
		}
	}
</style>